<template>
  <div class="app-container">
    <div class="flex">
    <div class="g-card fxauto">
      <el-form
        :model="form"
        label-width="140px">
        <el-form-item label="协议名称:">
          <el-input v-model="form.agreementName" placeholder="请输入名称" show-word-limit maxlength="15"></el-input>
          
        </el-form-item>
        <el-form-item label="协议内容:" prop="content">
        <editor id="tinymce" v-model="form.content" :placeholder="tinymceHtml" :init="init"></editor>
        </el-form-item>
        
      </el-form>
    </div>
  </div>
    
  </div>
  <div class="g-footer-sticky" v-if="!isDetail">
    <el-button @click="$router.back()">取消</el-button>
    <el-button type="primary" @click="submit">确定</el-button>
  </div>
</template>
<script>

import { saveAgreement, agreementDetail } from '@/api/drainageCode/pullNews'
import { ref, onMounted } from "vue"
import tinymce from "tinymce/tinymce"
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme"
import Editor from "@tinymce/tinymce-vue" // 引入组件
// 都是富文本插件
import "tinymce/icons/default"
import "tinymce/plugins/image"
import "tinymce/plugins/link"
import "tinymce/plugins/code"
import "tinymce/plugins/table"
import "tinymce/plugins/lists"
import "tinymce/plugins/wordcount"

export default {
  components: {
    Editor,
  },
  setup() {
    const init = {
        //初始化数据
        language_url: "/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
        language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
        skin_url: "/skins/ui/oxide", // 这里引入的样式
        height: 600, // 限制高度
        plugins: "link lists image code table wordcount", // 富文本插件
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | code | removeformat",
        branding: false, // //是否禁用“Powered by TinyMCE”
        menubar: true, //顶部菜单栏显示
        // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
        content_css: "/skins/content/default/content.css"
      }
      return {
        init
      }
  },
  data() {
    return {
      tinymceHtml: "请输入内容",
      form: {
        agreementName: '',
        content: ''
      },
      rules: {
        agreementName: [{ required: true, message: '请输入活码名称', trigger: 'blur' }],
        content: [{ required: true, message: '请添加活码客群', trigger: 'blur' }]
      },
    }
  },
  methods: {
    submit() {
      if (this.form.agreementName == '' || this.form.content == '') {
        this.msgError('内容不能为空')
        return
      }
      this.$store.loading = true
      saveAgreement(this.form)
        .then((res) => {
          this.msgSuccess('操作成功', res)
          this.$router.back()
          
        })
        .finally(() => {
          this.$store.loading = false
        })
      
    },
    getDetail(id) {
      var params = {}
      params.id = id
      agreementDetail(params)
        .then((res) => {
          console.log("协议详情 = ", res);
          this.form = res.data || {}
        })
    }
  },
  onMounted() {
    tinymce.init({}); // 初始化富文本
  },
  created() {
    console.log("this.$route.query", this.$route.query);
    this.getDetail(this.$route.query.id)
  }
  
}
</script>


<style scoped lang="scss">
.sub-des {
  font-size: 12px;

  font-weight: 400;
  color: var(--font-black-6);
}
::v-deep .image-uploader {
  .uploader-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }

  .upload-img {
    width: 80px;
    height: 80px;
  }
}

::v-deep .image-uploader2 {
  .uploader-icon {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
  .upload-img {
    width: 120px;
    height: 120px;
  }
}
</style>